<template>
  <div id="index">
    <!-- 顶部栏 -->
    <van-nav-bar title="订花快" fixed />

    <!-- 搜索框 -->
    <div class="all-search">
      <div class="icon" @click="lianxikefu">
        <van-icon name="chat-o" color="#fff" size="30" />
      </div>
      <div class="search">
        <van-search
          shape="round"
          background="#f73a3a"
          placeholder="请输入搜索关键词"
          input-align="center"
        />
      </div>
    </div>

    <!-- 宫格-品质保障 -->
    <div class="pinzhi">
      <div>
        <van-icon
          size="14px"
          class-prefix="icon"
          name="dunpaibaoxianrenzheng"
        />
        <p>品质保障</p>
      </div>
      <div>
        <van-icon size="14px" class-prefix="icon" name="huoche" />
        <p>全国同城</p>
      </div>
      <div>
        <van-icon size="14px" class-prefix="icon" name="weiju" />
        <p>花蕊协会</p>
      </div>
      <div>
        <van-icon size="14px" class-prefix="icon" name="shijian" />
        <p>2小时达</p>
      </div>
    </div>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        ><img src="../../public/swiper/1.png" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../../public/swiper/2.png" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../../public/swiper/3.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../../public/swiper/4.png" alt=""
      /></van-swipe-item>
    </van-swipe>

    <!-- 鲜花快讯 -->
    <div class="zixun">
      <div>
        <span>鲜花</span>
        <span>快讯</span>
      </div>
      <div>
        <van-notice-bar
          left-icon="volume-o"
          text="全国市区1-2小时送达，中国花卉协会会员单位，商城选好款式可直接下单，可代写贺卡。"
        />
      </div>
    </div>

    <!-- 分类宫格 -->
    <van-grid>
      <van-grid-item
        class="iconfont"
        icon-prefix="icon"
        icon="xianhua"
        text="恋爱表白"
        to="circle"
      />
      <van-grid-item
        class="iconfont"
        icon-prefix="icon"
        icon="hua1"
        text="朋友生日"
        to="circle"
      />
      <van-grid-item
        class="iconfont"
        icon-prefix="icon"
        icon="hua2"
        text="父母长辈"
        to="circle"
      />
      <van-grid-item
        class="iconfont"
        icon-prefix="icon"
        icon="hua"
        text="开业花篮"
        to="circle"
      />
    </van-grid>

    <!-- 广告图 -->
    <div class="guanggao">
      <img src="../../public/index/guanggao.png" alt="" />
    </div>

    <!-- 商品列表 -->
    <div class="project-list">
      <!-- f1:今日推荐 -->
      <div class="f1">
        <div class="titlef">
          <span>今日推荐</span>
          <div @click="toCircle"><p>更多 ></p></div>
        </div>
        <van-card
          v-for="a in jrtj"
          :key="a.id"
          :price="a.price"
          :desc="a.desc"
          :title="a.title"
          :origin-price="a.oprice"
          :thumb="a.img"
        >
          <template #tags>
            <van-tag plain type="danger">{{ a.tag }}</van-tag>
          </template>
        </van-card>
      </div>
      <van-divider />

      <!-- f2:恋爱表白 -->
      <div class="f2">
        <div class="titlef">
          <span>恋爱表白</span>
          <div @click="toCircle"><p>更多 ></p></div>
        </div>
        <div class="pro-cards">
          <div class="pro-card" v-for="b in labb" :key="b.id">
            <img class="image" :src="b.img" />
            <span class="content">{{ b.title }}</span>
            <span class="price">¥{{ b.price }}</span>
          </div>
        </div>
      </div>
      <van-divider />

      <!-- f2:生日祝福 -->
      <div class="f2">
        <div class="titlef">
          <span>生日祝福</span>
          <div @click="toCircle"><p>更多 ></p></div>
        </div>
        <div class="pro-cards">
          <div class="pro-card" v-for="c in srzf" :key="c.id">
            <img class="image" :src="c.img" alt="" />
            <span class="content">{{ c.title }}</span>
            <span class="price">¥{{ c.price }}</span>
          </div>
        </div>
      </div>
      <van-divider />

      <!-- f2:父母长辈 -->
      <div class="f2">
        <div class="titlef">
          <span>父母长辈</span>
          <div @click="toCircle"><p>更多 ></p></div>
        </div>
        <div class="pro-cards">
          <div class="pro-card" v-for="d in fmzb" :key="d.id">
            <img class="image" :src="d.img" alt="" />
            <span class="content">{{d.title}}</span>
            <span class="price">¥{{d.price}}</span>
          </div>
        </div>
      </div>
      <van-divider />

      <!-- f2:商务礼仪 -->
      <div class="f2">
        <div class="titlef">
          <span>商务礼仪</span>
          <div @click="toCircle"><p>更多 ></p></div>
        </div>
        <div class="pro-cards">
          <div class="pro-card" v-for="e in swly" :key="e.id">
            <img class="image" :src="e.img" alt="" />
            <span class="content">{{e.title}}</span>
            <span class="price">¥{{e.price}}</span>
          </div>
        </div>
      </div>
      <van-divider>全部鲜花</van-divider>
    </div>

    <div class="danwei">
      <img src="../../public/index/bottom_nav.png" alt="" />
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar
      v-model="active"
      fixed
      active-color="#f73a3a"
      inactive-color="#000"
    >
      <van-tabbar-item name="index" to="/index" icon="home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item name="circle" to="/circle" icon="apps-o"
        >分类</van-tabbar-item
      >
      <van-tabbar-item name="cart" to="/cart" icon="shopping-cart-o"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item name="mine" to="/mine" icon="contact"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "index",
      jrtj: [
        {
          title: "一心一意",
          desc: "11枝红玫瑰韩式花束",
          tag: "有花有你",
          price: "138.00",
          oprice: "199.00",
          img: "../../index/jinrituijian/1.png",
        },
        {
          title: "笑如花颜",
          desc: "3枝向日葵3枝香槟玫瑰混搭花束",
          tag: "热卖爆款",
          price: "179.00",
          oprice: "219.00",
          img: "../../index/jinrituijian/2.jpg",
        },
        {
          title: "知心祝福",
          desc: "16枝冰蓝玫瑰韩式花束",
          tag: "销量排行",
          price: "218.00",
          oprice: "269.00",
          img: "../../index/jinrituijian/3.png",
        },
        {
          title: "幸福快乐",
          desc: "香槟玫瑰粉玫瑰绣球韩式花束",
          tag: "经典爆款",
          price: "329.00",
          oprice: "399.00",
          img: "../../index/jinrituijian/4.jpg",
        },
      ],
      labb: [
        {
          img: "../../index/lianaibiaobai/1.jpg",
          title: "19枝红玫瑰韩式花束",
          price: "199.00",
          num: 248,
        },
        {
          img: "../../index/lianaibiaobai/2.jpg",
          title: "精选19朵红玫瑰花束",
          price: "229.00",
          num: 298,
        },
        {
          img: "../../index/lianaibiaobai/3.png",
          title: "21枝粉玫瑰配蓝色满天星花束",
          price: "299.00",
          num: 648,
        },
        {
          img: "../../index/lianaibiaobai/4.png",
          title: "19枝密西根碎冰蓝玫瑰韩式花束",
          price: "269.00",
          num: 1137,
        },
        {
          img: "../../index/lianaibiaobai/5.png",
          title: "19枝粉紫玫瑰混搭韩式花束",
          price: "239.00",
          num: 999,
        },
        {
          img: "../../index/lianaibiaobai/6.jpg",
          title: "9枝粉玫瑰+进口满天星花束",
          price: "219.00",
          num: 125,
        },
        {
          img: "../../index/lianaibiaobai/7.jpg",
          title: "99朵红玫瑰网纱小夜灯款",
          price: "689.00",
          num: 367,
        },
        {
          img: "../../index/lianaibiaobai/8.jpg",
          title: "33朵红玫瑰精美花束",
          price: "339.00",
          num: 428,
        },
      ],
      srzf: [
        {
          img: "../../index/shengrizhufu/1.jpg",
          title: "粉白玫瑰加绣球混搭花束",
          price: "289.00",
          num: 348,
        },
        {
          img: "../../index/shengrizhufu/2.jpg",

          title: "雪山白玫瑰绣球花束",
          price: "289.00",
          num: 298,
        },
        {
          img: "../../index/shengrizhufu/3.jpg",

          title: "26枝香槟玫瑰搭配桔梗花",
          price: "289.00",
          num: 648,
        },
        {
          img: "../../index/shengrizhufu/4.jpg",

          title: "33枝香槟玫瑰韩式花束",
          price: "329.00",
          num: 1137,
        },
        {
          img: "../../index/shengrizhufu/5.jpg",

          title: "7枝向日葵韩式花束",
          price: "219.00",
          num: 999,
        },
        {
          img: "../../index/shengrizhufu/6.png",

          title: "19枝紫玫瑰花束",
          price: "239.00",
          num: 125,
        },
        {
          img: "../../index/shengrizhufu/7.jpg",

          title: "19枝紫红玫瑰混搭花束",
          price: "229.00",
          num: 367,
        },
        {
          img: "../../index/shengrizhufu/8.jpg",

          title: "19枝香槟玫瑰花束",
          price: "259.00",
          num: 428,
        },
      ],
      fmzb: [
        {
          img: "../../index/fumuzhangbei/1.jpg",
          title: "15枝粉色康乃馨粉色满天星韩式花束",
          price: "198.00",
          num: 333,
        },
        {
          img: "../../index/fumuzhangbei/2.jpg",
          title: "粉玫瑰粉百合混搭花束",
          price: "198.00",
          num: 356,
        },
        {
          img: "../../index/fumuzhangbei/3.jpg",
          title: "11枝红色康乃馨韩式花束",
          price: "199.00",
          num: 33,
        },
        {
          img: "../../index/fumuzhangbei/4.png",
          title: "白百合红玫瑰红康乃馨韩式花束",
          price: "289.00",
          num: 138,
        },
        {
          img: "../../index/fumuzhangbei/5.jpg",
          title: "16枝康乃馨搭配白百合花束",
          price: "229.00",
          num: 1514,
        },
        {
          img: "../../index/fumuzhangbei/6.jpg",
          title: "红玫瑰搭配红色康乃馨花束",
          price: "198.00",
          num: 333,
        },
        {
          img: "../../index/fumuzhangbei/7.jpg",
          title: "红色康乃馨搭配红玫瑰花束",
          price: "249.00",
          num: 543,
        },
        {
          img: "../../index/fumuzhangbei/8.jpg",
          title: "16枝粉色康乃馨花束",
          price: "189.00",
          num: 533,
        }
      ],
      swly:[
        {
          img: "../../index/shangwuliyi/1.jpg",
          title: "大吉大利 一对开业花篮",
          price: "288.00",
          num: 43,
        },
        {
          img: "../../index/shangwuliyi/2.jpg",
          title: "红红火火 一对开业花篮",
          price: "489.00",
          num: 473,
        },
        {
          img: "../../index/shangwuliyi/3.jpg",
          title: "生意红火 一对花篮",
          price: "398.00",
          num: 425,
        },
        {
          img: "../../index/shangwuliyi/4.png",
          title: "大吉大利 粉白玫瑰气球开业花篮",
          price: "489.00",
          num: 143,
        },
        {
          img: "../../index/shangwuliyi/5.jpg",
          title: "开业大卖 一对开业花篮",
          price: "328.00",
          num: 653,
        },
        {
          img: "../../index/shangwuliyi/6.png",
          title: "一路红火 一对开业花篮",
          price: "388.00",
          num: 63,
        },
        {
          img: "../../index/shangwuliyi/7.jpg",
          title: "大展宏图 一对开业花篮",
          price: "328.00",
          num: 543,
        },
        {
          img: "../../index/shangwuliyi/8.jpg",
          title: "福气多多 一对开业花篮",
          price: "388.00",
          num: 343,
        },
      ]
    };
  },
  methods: {
    lianxikefu() {
      this.$router.push('lianxikefu')
    },
    toCircle(){
      this.$router.push('circle')

    }
  },
};
</script>

<style lang="scss">
#index {
  .icon {
    font-style: inherit;
  }
  .van-nav-bar {
    background-color: #f73a3a;
    .van-nav-bar__title {
      color: #fff;
    }
  }
  .van-hairline--bottom::after {
    border: 0;
  }
  .all-search {
    background-color: #f73a3a;
    margin-top: 46px;
    display: flex;
    width: 100%;
    .icon {
      padding: 10px 0 10px 12px;
    }
    .search {
      flex: 1;
    }
  }
  .pinzhi {
    display: flex;
    justify-content: space-around;
    background-image: linear-gradient(#f73a3a, #f2797c, #fff);
    color: #fff;
    padding: 0 0 10px 0;
    height: 90px;
    div {
      display: flex;
      .van-icon {
        line-height: 16px;
        font-size: 12px;
      }
      p {
        line-height: 16px;
        font-size: 12px;
      }
    }
  }
  .van-swipe {
    margin: -70px 10px 10px 10px;
    border-radius: 10px;
    height: 170px;
    img {
      width: 100%;
    }
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 200px;
    text-align: center;
    background-color: #39a9ed;
  }
  .zixun {
    margin: 10px;
    display: flex;

    div:nth-child(1) {
      font-family: "宋体";
      font-weight: 900;
      line-height: 40px;
      span:nth-child(1) {
        color: #f2797c;
        font-size: 20px;
      }
      span:nth-child(2) {
        color: #000;
        font-size: 20px;
      }
    }
    div:nth-child(2) {
      flex: 1;
      font-size: 14px;
      .van-notice-bar {
        background-color: #fff;
        padding: 0 0 0 16px;
        .van-icon {
          color: #f2797c;
        }
        .van-notice-bar__content {
          color: #000;
          font-weight: normal;
        }
      }
    }
  }
  .van-hairline--top::after,
  .van-grid-item__content::after {
    border: 0;
  }
  .guanggao {
    padding: 10px;
    img {
      width: 100%;
    }
  }
  .project-list {
    margin: 10px;
    .f1 {
      .titlef {
        display: flex;
        justify-content: space-between;
        line-height: 28px;
        span {
          font-size: 18px;
          font-weight: 900;
        }
        p {
          color: gray;
          font-size: 12px;
        }
      }
      .van-card__title {
        font-size: 20px;
        line-height: 20px;
      }
    }
    .f2 {
      .titlef {
        display: flex;
        justify-content: space-between;
        line-height: 28px;
        margin: 10px 0;
        span {
          font-size: 18px;
          font-weight: 900;
        }
        p {
          color: gray;
          font-size: 12px;
        }
      }
      .pro-cards {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .pro-card {
          width: 48%;
          margin-bottom: 10px;
          border: 1px solid #f8f8f8;
          display: grid;
          .image {
            width: 100%;
            border-radius: 5px;
          }
          .content {
            margin: 10px 0;
            font-size: 16px;
            white-space: nowrap; //禁止换行
            overflow: hidden;
            text-overflow: ellipsis; //...
          }
          .price {
            font-size: 16px;
            color: #f73a3a;
          }
        }
      }
    }
  }
  .danwei {
    margin: 10px 10px 56px 10px;
    img {
      width: 100%;
      border-radius: 5px;
    }
  }
}
</style>
